<template>
    <footer>
        <div class="f-top">
            <div class="f-top-content">
                <div class="left-content">
                    <ul>
                        <li>考试信息</li>
                        <li>
                            <img src="../assets/img/如何成为CIFA.png" alt="" srcset="">
                            <span>如何成为CIFA</span>
                        </li>
                        <li>
                            <img src="../assets/img/如何成为CWA.png" alt="" srcset="">
                            <span>如何成为CWA</span>
                        </li>
                        <li>
                            <img src="../assets/img/如何报名考试.png" alt="" srcset="">
                            <span>如何报名考试</span>
                        </li>
                        <li>
                            <img src="../assets/img/如何申请证书.png" alt="" srcset="">
                            <span>如何申请证书</span>
                        </li>
                    </ul>
                    <ul>
                        <li>资料下载</li>
                        <li>
                            <img src="../assets/img/CIFA备考指南.png" alt="" srcset="">
                            <span>CIFA备考指南</span>
                        </li>
                        <li>
                            <img src="../assets/img/CIFA考试大纲.png" alt="" srcset="">
                            <span>CIFA考试大纲</span>
                        </li>
                        <li>
                            <img src="../assets/img/CWA备考指南.png" alt="" srcset="">
                            <span>CWA备考指南</span>
                        </li>
                        <li>
                            <img src="../assets/img/CWA考试大纲.png" alt="" srcset="">
                            <span>CWA考试大纲</span>
                        </li>
                    </ul>
                </div>
                <div class="right-content">
                    <ul>
                        <li>想获取更多CIFA和CWA认证信息？</li>
                        <li>提交邮箱，我们将为您定期发送关于职业认证最新资讯</li>
                        <li>
                            <input type="text" v-model="formData.email" placeholder="输入电子邮件地址">
                            <el-button @click="submit">提交</el-button>
                        </li>
                        <li>
                            <el-checkbox v-model="checked"  
                                size="large" />我愿意接收来自IIFA的邮件，并遵守IIFA相关服务协议和隐私政策
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="f-bottom">
            <div class="f-bottom-content">
                <ul>
                    <li>
                        <div>
                            <p>
                                <span>服务协议</span>
                                <spanv style="margin:0 10px;">|</spanv>
                                <span>隐私政策</span>
                            </p>
                            <p>
                                <img src="../assets/img/微信.png" alt="">
                                <span>微信:iifachina5</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div>
                            <p>@2020-2025, Beijing Authorized Representative Office of llFA</p>
                            <p>
                                <img src="../assets/img/电子邮件.png" alt="">
                                <span>邮箱:iifachina@iifa.org.cn</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div>
                            <p>版权所有 IIFA中国培训与认证管理中心(华菁教育)</p>
                            <p>
                                <img src="../assets/img/地址.png" alt="">
                                <span>北京市大兴区新源大街29号院</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <span>京ICP备2024063674号-5 | 增值电信业务经营许可证: 京B2-20241537</span>
                        <!-- <img src="../assets/img/bei-an.png" alt="" srcset="">
                        <span>沪公网安备 31010602005970号</span> -->
                    </li>
                </ul>
            </div>
        </div>
    </footer>
</template>
<script lang="ts" setup> 
import {saveInformationApi} from '@/api/footer'
import type{ InformationParam} from '@/api/footer'
const formData=ref<InformationParam>({email:''})
const checked = ref(false)
 function submit(){
    if(formData.value.email===''){
        ElMessage.error('请输入电子邮箱')
    }else{
        checked.value=true
        saveInformationApi(formData.value).then((res:any)=>{
            if(res.code===200){
                ElMessage.success(res.msg)
            }else{
                ElMessage.error(res.msg)
            }
        })
    }

       
    }
 
</script>
<style scoped lang='less'>
.f-top {
    padding: 80px 0 70px;
    background: #013668;

    display: flex;

    .f-top-content {
        width: 1300px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left-content {
            color: #ffffff;
            display: flex;
            width: 420px;
            justify-content: space-between;

            ul {
                width: fit-content;

                >li:first-child {
                    font-size: 20px;
                    color: #F39941;
                }

                li {
                    list-style: none;
                    padding: 10px;
                    cursor: pointer;

                    img {
                        width: 24px;
                        margin-right: 10px;
                        vertical-align: middle;
                    }
                }
            }
        }

        .right-content {
            width: 620px;

            >ul {
                padding: 50px 75px 50px 50px;
                border: 1px solid #fff;
                color: #fff;

                >li:first-child {
                    font-size: 20px;
                    color: #99bea2;
                }

                li {
                    list-style: none;
                    padding: 5px 0;

                    input {
                        height: 50px;
                        width: 280px;
                    }

                    button {
                        height: 50px;
                        width: 146px;
                        color: #fff;
                        font-weight: bold;
                        background: #ddd;
                        background: #64b1df;
                        cursor: pointer;
                        border-radius: 30px;
                        font-size: 18px;
                        margin-left: 15px;
                    }
                }
            }
        }
    }
}

.f-bottom {
    padding: 35px 0;
    background: #002c56;
    color: #fff;

    .f-bottom-content {
        width: 1300px;
        margin: 0 auto;
        display: flex;

        ul {
            width: 100%;

            li:not(:last-child) {
                padding-bottom: 10px;
            }

            li:last-child {
                font-size: 14px;
                color: #66809a;

                img {
                    margin: 0 10px;
                    vertical-align: middle;
                }
            }

            li {
                width: 100%;
                list-style: none;

                >div {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                p {
                    color: #ffffff;
                }

                img {
                    width: 24px;
                    vertical-align: middle;
                    margin-right: 10px;
                }
            }
        }

    }
}

/deep/ .el-checkbox__label {
    color: #ffffff;
    white-space: normal;
}</style>